import ReactECharts from 'echarts-for-react';
import { Button } from 'antd'
import { getKDataFn } from './../../api/data'
import { useState } from 'react'
const Com = () => {
    const getLineOption = () => {
        const option = {
            title: {
                text: 'echarts 简单折线图'
            },
            legend: {
                data: ['星期', '日期', '测试']
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '星期',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                },
                {
                    name: '日期',
                    data: [620, 1032, 801, 834, 1390, 1830, 320],
                    type: 'bar',
                    smooth: true
                },
                {
                    name: '测试',
                    data: [1820, 1932, 1901, 1934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }
            ],
            tooltip: {
                show: true
            }
        }
        return option
    }
    // 极坐标
    const getPolarOption = () => {
        const data = [];
        for (let i = 0; i <= 100; i++) {
            let theta = (i / 100) * 360;
            let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
            data.push([r, theta]);
        }
        const option = {
            title: {
                text: '极坐标双数值轴'
            },
            legend: {
                data: ['line']
            },
            polar: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            angleAxis: {
                type: 'value',
                startAngle: 0
            },
            radiusAxis: {},
            series: [
                {
                    coordinateSystem: 'polar',
                    name: 'line',
                    type: 'line',
                    data: data
                }
            ]
        }
        return option
    }
    // K线图
    const [x, setX] = useState(['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'])
    const [val, setVal] = useState([
        [10, 34, 10, 38],
        [20, 35, 30, 50],
        [11, 38, 33, 44]
    ])
    const changeKOption = () => {
        getKDataFn().then(res => {
            setX(res.data.x)
            setVal(res.data.val)
        })
    }
    const getKOption = () => {
        const option = {
            title: {
                text: 'K线图'
            },
            xAxis: {
                data: x
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: val
                }
            ]
        };
        return option
    }
    return (
        <div style={{ width: '100%' }}>
            <ReactECharts
                option={getLineOption()}
            />
            <div style={{ width: '100%' }}>
            <div style={{ width: '50%', float: 'left'}}>
            <ReactECharts
                option={getPolarOption()}
            />
            </div>
            <div style={{ width: '50%', float: 'left' }}>
            <Button onClick={changeKOption}>加载K数据</Button>
            <ReactECharts
                option={getKOption()}
            />
            </div>
            
            
            </div>
            {/* <div style={{ width: '50%' }}>
            </div> */}
        </div>
    )
}

export default Com